<!-- ----------------------------------------------------------------------------
 - Copyright (C) 2011 Niels Mayer <NielsMayer _AT_ gmail _DOT_ com>
 - 
 - Exhibit Example showing how to work with YouTube Json "standard feeds."
 - ( http://code.google.com/apis/youtube/2.0/developers_guide_protocol_video_feeds.html#Standard_feeds )
 - See http://www.simile-widgets.org/wiki/How_to_make_an_exhibit_from_any_JSONP_data_source
 -
 - This program is free software; you can redistribute it and/or modify
 - it under the terms of the GNU General Public License as published by
 - the Free Software Foundation; either version 2 of the License, or
 - (at your option) any later version.
 -
 - This program is distributed in the hope that it will be useful,
 - but WITHOUT ANY WARRANTY; without even the implied warranty of
 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 - GNU General Public License for more details.
 -
 - You should have received a copy of the GNU General Public License
 - along with this program; if not, write to the Free Software
 - Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
---------------------------------------------------------------------------- -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>YouTube n' Exhibit</title>

<link rel='stylesheet' href='../../api/styles/common.css' type='text/css' />
<link rel='stylesheet' href='styles.css' type='text/css' />
<script src="../../api/exhibit-api.js" type="text/javascript"></script>
<script src="../../api/extensions/time/time-extension.js"></script>

<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_shared?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_on_the_web"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_shared?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_shared"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/top_rated?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_top_rated"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/top_favorites?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_top_favorites"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_viewed"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_popular?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_popular"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_recent?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_recent"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_discussed?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_discussed"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/most_responded?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_most_responded"
	/>
<link 	rel="exhibit/data" 
      	type="application/jsonp"
        href="https://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?max-results=50&alt=json-in-script"
      	ex:converter="ytConverter_recently_featured"
	/>
<script>
//var inJson;
//var convertedJson = { "items": [] };
        // can't figure out a way of passing the "kind" parameter otherwise...
        function ytConverter_on_the_web(json) { return ytConverter(json, "Trending");  }
        function ytConverter_most_shared(json) { return ytConverter(json, "Most Shared");  }
        function ytConverter_top_rated(json) { return ytConverter(json, "Top Rated");  }
        function ytConverter_top_favorites(json) { return ytConverter(json, "Top Favorites");  }
        function ytConverter_most_viewed(json) { return ytConverter(json, "Most Viewed");  }
        function ytConverter_most_popular(json) { return ytConverter(json, "Most Popular");  }
        function ytConverter_most_recent(json) { return ytConverter(json, "Most Recent");  }
        function ytConverter_most_discussed(json) { return ytConverter(json, "Most Discussed");  }
        function ytConverter_most_responded(json) { return ytConverter(json, "Most Responsed");  }
        function ytConverter_recently_featured(json) { return ytConverter(json, "Recently Featured");  }

        function ytConverter(json, kind) {
//       inJson = json;
         var convertedJson = {
types:      { "Podcast"   : { pluralLabel: "Podcasts "  },
              "Episode"   : { pluralLabel: "Episodes "  } },
properties: {
"kind":		{ valueType: "text" },
"published":	{ valueType: "date", label: "Published" },
"updated":	{ valueType: "date", label: "Updated" },
"category":	{ valueType: "text" },
"content":	{ valueType: "text" },
"alt-url":	{ valueType: "url"  },
"self-url":	{ valueType: "url"  },
"authorName":	{ valueType: "text" },
"authorUri":	{ valueType: "url"  } },
items:	    []
                             };
	 for (var i = 0; i < json.feed.entry.length; i++) {
             var entry = json.feed.entry[i];
//	     console.log("Title: " + entry.title.$t);
             convertedJson.items[i] = {
"kind":		kind,
"type":		'Episode',
"id":		(function() { try { return(entry.id.$t); } catch(e) { return("<<empty>>"); }})(),
"label":	(function() { try { return(entry.title.$t); } catch(e) { return("<<empty>>"); }})(),
"published":	(function() { try { return(entry.published.$t); } catch(e) { return(""); }})(), //fails:SimileAjax.DateTime.parseIso8601DateTime()
"updated":	(function() { try { return(entry.updated.$t); } catch(e) { return(""); }})(),   //fails:SimileAjax.DateTime.parseIso8601DateTime()
"category":	(function() { try { return(entry.category[0].term); } catch(e) { return("<<empty>>"); }})(),
"content":	(function() { try { return(entry.content.$t); } catch(e) { return("<<empty>>"); }})(),
"alt-url":	(function() { try { for (j in entry.link) if (entry.link[j].rel='alternate') return(entry.link[j].href)} catch(e) { return(""); }})(),
"self-url":	(function() { try { for (j in entry.link) if (entry.link[j].rel='self') return(entry.link[j].href)} catch(e) { return(""); }})(),
"authorName":	(function() { try { return(entry.author[0].name.$t); } catch(e) { return("<<empty>>"); }})(),
"authorUri":	(function() { try { return(entry.author.uri.$t); } catch(e) { return("<<empty>>"); }})(),
			              };
	 }
	 return convertedJson;
        }
    </script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>YouTube n' Exhibit</large></li>
    </ul>

<table width="100%" cellspacing="20"><tr valign="top">
	<td>
		<div ex:role="viewPanel">
			<div ex:role="view" 
				 ex:viewClass="Timeline" 
				 ex:start=".published"
				 ex:topBandUnit="day"
				 ex:bottomBandUnit="month"
				 ex:bubbleWidth="800"
				 ex:bubbleHeight="600"
				 ex:topBandPixelsPerUnit="200">
                 
                 	<div ex:role="lens">
 		<b ex:content=".label"></b><p>
 		<i ex:content=".authorName"></i>
 		<i ex:content=".authorUri"></i>
 		<p ex:content=".content"></p>
	</div>
			</div>
                     <div ex:role="view"
                        ex:viewClass="Tabular"
                        ex:label="Details"
                        ex:columns=".kind, .label, .published, .updated, .category, .alt-url, .self-url, .authorName, .authorUri, .content"
                        ex:columnLabels="Kind, Title, Published, Updated, Category, Media URL, Feed URL, Author, Author Link, Summary"
                        ex:formats="date { mode: medium; show: date }"
                        ex:sortColumn="2"
                        ex:sortAscending="false"
                        ex:paginate="true"
                        ex:pageSize="5"
                        >
                        <table style="display: none;">
                            <tr ex:background-style-content="if(exists(.content), '#ccc', 'white')">
                                <td><b    ex:content=".label"></b></td>
                                <td><span ex:content=".author"></span></td>
                                <td><span ex:content=".authorUri"></span></td>
                                <td><span ex:content=".alt-url"></span></td>
                                <td><span ex:content=".self-url"></span></td>
                                <td><br/><span ex:content=".content"></span></td>
                            </tr>
                        </table>
                    </div>
	</div>
	</td>
	<td width="20%">
    		<div ex:role="facet"
		     ex:facetClass="TextSearch"
		     ex:facetLabel="Search"
		     ex:height="160px"></div>
                <div ex:role="facet" id="episodes-hierarchichal-facet"
                     ex:facetClass="HierarchicalFacet"
                     ex:expression="value" 
                     ex:uniformGrouping=".kind"
                     ex:facetLabel="Episodes"
                     ex:scroll="true"
                     ex:height="240px"></div>
		<div ex:role="facet"
		     ex:expression=".authorName"
		     ex:facetLabel="Author"
		     ex:sortMode="count"
		     ex:height="80px"></div>
	</td>
	</tr>
</table>				
</body>
</html>
